<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片操作</title>
		
		  <style>
		    /* 卡片容器 */
		    .card-list {
		      display: flex; /* 使用弹性布局 */
		      flex-wrap: wrap; /* 换行显示卡片 */
		      justify-content: space-between; /* 水平分布在行中 */
		      padding: 20px; /* 边距控制 */
		      list-style: none; /* 移除默认的列表样式 */
		    }
		    
		    /* 卡片项 */
		    .card {
		      width: calc(33.33% - 20px); /* 每行显示3个卡片 */
		      background-color: #f1f1f1; /* 背景颜色 */
		      padding: 20px; /* 边距控制 */
		      margin-bottom: 20px; /* 底部间距 */
		      box-sizing: border-box; /* 盒模型设为边框盒 */
		      /* 其他样式属性根据需要自定义 */
		    }
		  </style>
		  
	</head>
	<body>
		
		<ul class="card-list">
		    <li class="card"> <!-- 卡片1 -->
		      Card 1 这是卡片，哈哈
		    </li>
		    <li class="card"> <!-- 卡片2 -->
		      Card 2
		    </li>
		    <li class="card"> <!-- 卡片3 -->
		      Card 3
		    </li>
		    <!-- 这里添加更多卡片项目 -->
		  </ul>
	</body>
</html>